<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>政务网登陆成功</title>
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <!-- 引入组件库 -->
    <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>

    </style>
    <style>
        @media (min-width: 240px) and (max-width: 320px) {
            html {
                font-size: 12.8px !important
            }
        }

        @media (min-width: 321px) and (max-width: 360px) {
            html {
                font-size: 14.4px !important
            }
        }

        @media (min-width: 361px) and (max-width: 375px) {
            html {
                font-size: 15px !important
            }
        }

        @media (min-width: 376px) and (max-width: 384px) {
            html {
                font-size: 15.36px !important
            }
        }

        @media (min-width: 385px) and (max-width: 414px) {
            html {
                font-size: 16.56px !important
            }
        }

        @media (min-width: 415px) and (max-width: 450px) {
            html {
                font-size: 18px !important
            }
        }

        @media (min-width: 451px) and (max-width: 500px) {
            html {
                font-size: 20px !important
            }
        }

        @media (min-width: 501px) and (max-width: 550px) {
            html {
                font-size: 22px !important
            }
        }

        @media (min-width: 551px) and (max-width: 569px) {
            html {
                font-size: 22.72px !important
            }
        }

        @media (min-width: 569px) and (max-width: 640px) {
            html {
                font-size: 25.6px !important
            }
        }

        @media (min-width: 641px) and (max-width: 667px) {
            html {
                font-size: 26.68px !important
            }
        }

        @media (min-width: 668px) and (max-width: 736px) {
            html {
                font-size: 29.44px !important
            }
        }

        @media (min-width: 738px) and (max-width: 768px) {
            html {
                font-size: 30.72px !important
            }
        }

        @media (min-width: 769px) and (max-width: 900px) {
            html {
                font-size: 31px !important
            }
        }

        @media (min-width: 901px) and (max-width: 1080px) {
            html {
                font-size: 33.24px !important
            }
        }

        html {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            background-color: aliceblue;

        }

        .header {
            height: 4.5rem;
            background-color: #2d83fc;
            color: #ffffff;
            font-family: "microsoft yahei";
            font-size: 1.5rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0 0.8rem;
            font-weight: bolder;
        }

        .container {
            width: 100%;
            height: calc(100% - 4.5rem);
            background-color: aliceblue;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }


        .box1 {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            margin-top: 30px;
        }

        .codeBtn,
        .countDown {
            margin-left: 10px;
            background-color: #2d83fc;
            color: #fff;
            border-radius: 4px;
            width: 100px;
            height: 40px;
            line-height: 40px;
            white-space: nowrap;
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
        }

        .register-box {
            width: 450px;
            height: 530px;
            background-color: #fff;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 30px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
        }

        .title {
            font-size: 30px;
            font-weight: 700;
            margin-top: 60px;
        }

        .box1 input {
            box-sizing: border-box;
            height: 40px;
            border: 1px solid #ccc;
            padding: 7px 0px;
            border-radius: 3px;
            /*css3属性IE不支持*/
            padding-left: 5px;
            flex: 1;
            margin-right: 20px;
        }

        .box2 {
            margin-top: 40px;
        }

        .box2 input {
            box-sizing: border-box;
            height: 40px;
            border: 1px solid #ccc;
            padding: 7px 0px;
            border-radius: 3px;
            /*css3属性IE不支持*/
            padding-left: 5px;
            width: 120px;
            margin-right: 20px;
        }

        #submitBtn {
            /* width: 80%; */
            margin-top: 100px;
            background-color: #2d83fc;
            color: #fff;
            border-radius: 4px;
            height: 40px;
            line-height: 40px;
            white-space: nowrap;
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>

<body>
<header class="header">
    <div>用户政务网登录成功</div>
</header>
<div class="container">
    <!-- <div class="head-pic" id="legalPersonCertification">
        <div class="head-title">用户政务网登录成功</div>
        <form method="post" name="form">
            <div class="box1"> <input type="tel" name="mobile" placeholder="输入手机号" id="phone"
                    style="width: 150px;" />
                <div class="codeBtn">获取验证码</div>
                <div class="countDown" style="display: none;">

                </div>
            </div>
            <input type="text" name="tempCode" placeholder="输入验证码" id="tempCode" style="width: 100px;" />

            <br />
            <input type="submit" value="提交" style="margin-top: 10px;" id="submitBtn" />
        </form>
    </div> -->

    <div class="register-box">
        <div class="title">绑定手机</div>
        <div class="box1">
            <input type="tel" placeholder="输入手机号" id="phone">
            <div class="codeBtn">获取验证码</div>
            <div class="countDown" style="display: none;">
                60s
            </div>
        </div>
        <div class="box2">
            <input type="text" name="tempCode" placeholder="输入验证码" id="tempCode" />
        </div>

        <div id="submitBtn">
            确定
        </div>


    </div>


</div>
<script>

    // function getParams(name) {
    //     var results = new RegExp("[?&]" + name + "=([^&#]*)").exec(
    //         window.location.href,
    //     );
    //     if (results == null) {
    //         return null;
    //     }
    //     return decodeURI(results[1]) || 0;
    // };
    var identityName = '[[${ identityName }]]'
    var identityCode = '[[${ identityCode }]]'
    var identityRole = '[[${ identityRole }]]'
    var identityType = '[[${ identityType }]]'
    var idType = '[[${ idType }]]'
    $(".codeBtn").click(function () {
        let phone = $("#phone").val();
        if(isNotPhone(phone)){
            alert("请输入正确的手机号!");
            return;
        }
        let p = {
            phone,
            type: "0",
        };
        if (!phone) {
            return
        }
        let p1 = {
            phone,
            identityRole,
        }
        $.get('https://www.zhelibuild.com/DataExchangeServer/sso/testPhoneUse', p1, function (result) {
            if (result != 'false') {
                $.get('https://www.zhelibuild.com/authserver/auth/sendCode', p, function (result) {
                    console.log(result)
                })
                $(".codeBtn").hide()
                $(".countDown").css('display', 'block')
                let num = 60;
                let timer = setInterval(() => {
                    num--;
                    let str = `${num}s`
                    $(".countDown").text(str)
                    if (num <= 0) {
                        $(".codeBtn").show()
                        $(".countDown").css('display', 'none')
                        clearInterval(timer)
                    }
                }, 1000);
            } else {
                alert('当前号码已进行认证,不可用!!!')
            }
        })
    });
    function isNotPhone(phone) {
        var myreg = /^1[3-9]\d{9}$/;
        if (!myreg.test(phone)) {
            return true
        } else {
            return false
        }
    }
    $("#submitBtn").click(function () {
        let phone = $("#phone").val()
        let code = $('#tempCode').val()
        // let identityName = getParams('identityName')
        // let identityCode = getParams('identityCode')
        // let identityRole = getParams('identityRole')
        // let identityType = getParams('identityType')
        // let idType = getParams('idType')




        if (phone && code) {
            let data = {
                phone,
                code,
                identityName,
                identityCode,
                identityRole,
                identityType,
                idType,
            }
            $.post('https://www.zhelibuild.com/DataExchangeServer/sso/authAndLogin', data, function (result) {
                console.log(result)
                // if (result) {
                //     if (typeof result == "string") {
                //         if (result.includes('B0001')) {
                //             alert("验证码错误")
                //         }
                //     }
                // }
                let res = JSON.parse(result)
                if (res.code == '00000') {
                    let code = res.data.code;
                    let str = `https://www.zhelibuild.com/webserver/app_project/index.html#/login?code=${code}&isZww=1`
                    window.open(str, '_self')
                } else {
                    alert(res.msg)
                }

            })
        } else {
            alert('信息不全')
        }

    })




</script>
</body>

</html>